<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="陈嘉乐">
    <title></title>
    <style>
     

body{
    margin: 0;
    background-color: #fff;
    min-width: 320px;
}

*{  
    
            box-sizing: border-box;
}
div,section,ul,li,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,p,table,thead,tbody,tfoot,tr,th,td,form{
    margin: 0;
    padding: 0;
}

/* 列表 */
ul,ol {
    list-style: none;
    font-size:inherit;
    color:inherit;
}

/*文字*/
span,b,i,em,del,strong,big,small,pre {
    margin:0;
    padding:0;
    border:0;
    font-style:normal;
    font-size:inherit;
    color:inherit;
}
/*链接*/
a {
    margin:0;
    padding:0;
    border:0;
    text-decoration: none;
    font-size:inherit;
    color: #999;
    top: 10px;

}

.clear {
    clear: both;
}
.clearfix{
    zoom: 1;
}
.clearfix::after{
    content: '';
    display: block;
    overflow: hidden;
    clear:both;
    height:0;
}
        .container {
            width: 1200px;
            margin: 0 auto;
            min-width: 1200px;
        }
        /* 导航 */

        .nav {
            width: 100%;
            height: 50px;
            background-color: #10c55b;
        }

        .nav .nav-container {
            display: flex;
            justify-content: space-between;
        }
        /* 左边选项 */

        .nav .nav-left {
            display: flex;
        }

        .nav-left li a {
            display: block;
            height: 50px;
            line-height: 50px;
            padding: 0 16px;
            color: #afffd0;
        }

        .nav-left li.active a {
            background-color: #01ac48;
            color: white;
        }

        .nav-left li:nth-child(2) a::after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 10px;
            background-image: url("common.png");
            background-position: -186px -25px;
        }

        .nav-left li a:hover {
            color: white;
            background-color: #01ac48;
        }
        /* 右边选项 */

        .nav-right {
            display: flex;
        }

        .nav-right li.vip a {
            display: block;
            height: 50px;
            line-height: 50px;
            padding: 0 16px;
            color: #afffd0;
        }

        .nav-right li.vip a::before {
            content: '';
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image: url("common.png");
            background-position: -125px -385px;
            /* margin-top: 10px; */
            position: relative;
            top: 15px;
        }

        .nav-right li.vip a:hover {
            color: white;
            background-color: #01ac48;
        }

        .nav-right li.login a {
            display: block;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: white;
            background-color: #01923d;
            margin-top: 10px;
            margin-left: 10px;
            padding: 0 10px;
            border-radius: 5px;
        }

        .nav-right li.login a:hover {
            box-shadow: 0 0 3px #01923d;
        }

        .nav-right li.register a {
            display: block;
            height: 30px;
            padding: 0 10px;
            margin-left: 10px;
            margin-top: 10px;
            line-height: 30px;
            color: #01923d;
            font-size: 14px;
        }
        /* 头部 */

        header {
            margin: 30px 0;
            display: flex;
        }

        .search {
            margin-left: 80px;
        }

        .search-list {
            border: 1px solid #999;
            border-radius: 5px;
            height: 50px;
            padding: 10px;
            line-height: 30px;
            color: #999;
            position: relative;
        }

        .search-list a:first-child::after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 10px;
            background-image: url("common.png");
            background-position: -126px -30px;
            position: relative;
            top: 2px;
            left: 5px;
        }

        .search-list a:first-child {
            display: inline-block;
            border-right: 1px solid #999;
            padding: 0 10px;
        }

        .search-list input {
            border: none;
            outline: none;
            width: 600px;
            padding-left: 10px;
        }

        .search-list a:last-child {
            display: inline-block;
            width: 80px;
            height: 50px;
            background-color: #10c55b;
            text-align: center;
            position: absolute;
            top: -1px;
            right: -1px;
            border-radius: 0 5px 5px 0;
        }

        .search-list a:last-child span {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-top: 10px;
            background-image: url("common.png");
            background-position: -60px -440px;
        }
        .search-info a:nth-child(1){
            color: #15DD67;
        }
        .search-info a:nth-child(3){
            color: #15DD67;
        }
        .search-info a:nth-child(5){
            color: #15DD67;
        }
        .search-info a:nth-child(6){
            color: #15DD67;
        }
        .search-info a:nth-child(10){
            color: #15DD67;
        }
        /* 轮播图 */

        .banner {
            position: relative;
            background: #060606;
        }

        .banner .img-list li {
            width: 1200px;
            height: 320px;
            display: none;
        }

        .banner .img-list li.current {
            display: block;
        }

        .banner-info {
            position: relative;
        }

        .indicator {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 20px;
            display: flex;
            justify-content: center;
        }

        .indicator li {
            width: 14px;
            height: 14px;
            background-color: #999;
            border-radius: 50px;
            margin: 2px;
            cursor: pointer;
        }

        .indicator li.active {
            background-color: #01923d;
        }

        .indicator li:hover {
            background-color: #01923d;
        }

        .banner .img-btn {
            width: 50px;
            height: 100%;
            background-image: url("lun.png");
            background-position: 0 center;
            background-repeat: no-repeat;
            position: absolute;
            top: 0;
            display: none;
        }

        .banner .prev {
            left: 0;
        }

        .banner .prev:hover {
            background-position: -153px center;
        }

        .banner .next {
            background-position: -51px center;
            right: 0;
        }

        .banner .next:hover {
            background-position: -102px center;
        }
        /* 内容 公共部分 */

        .content-box {
            margin-top: 50px;
        }

        .content-title {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-around;
        }

        .content-title h2 {
            font-weight: normal;
            font-size: 20px;
            
        }
          
        .content-title h2::before {
            content: '';
            display: inline-block;
            width: 40px;
            height: 30px;
            background-image: url("common.png");
            background-position: -90px -413px;
            position: relative;
            top: 5px;
        }

        .content-title>ul {
            width: 1000px;
            display: flex;
            justify-content: space-between;
            position: relative;
            top: 5px;
        }

        .content-list {
            display: flex;
            justify-content: space-between;
        }

        .content-list>li {
            width: 290px;
            height: 200px;
            position: relative;
            /* 隐藏溢出容器的内容 */
            overflow: hidden;
            
        }

        .corver {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: all 0.3s;
        }

        .content-list li:hover .corver {
            opacity: 1;
        }
        /* 精选专题 */

        .jxzt .corver-info {
            width: 60%;
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
            position: absolute;
            top: 100%;
            left: 20%;
        }

        .jxzt .content-list li:hover .corver-info {
            top: 30%;
            transition: all 0.3s;
        }
        /* 商用海报 */

        .syhb .content-list>li {
            height: 386px;
        }

        .corver-info {
            position: absolute;
            right: 20px;
            top: -80px;
            transition: all 0.3s;
        }

        .corver-info ul {
            display: flex;
            text-align: center;
        }

        .corver-info .download {
            width: 55px;
            height: 55px;
            background-image: url("common.png");
            background-position: 0 -55px;
        }

        .corver-info .heart {
            width: 55px;
            height: 55px;
            background-image: url("common.png");
            background-position: -55px -55px;
        }

        .corver-info .download:hover {
            background-position: 0 -111px;
        }

        .corver-info .heart:hover {
            background-position: -55px -111px;
        }

        .content-list>li:hover .corver-info {
            top: 20px;
        }
        footer {
            margin-top: 50px;
        }



        .foo {
            width: 1200px;
            height: 280px;
        }



        .foot {
            display: flex;
        }



        .foot-l {
            width: 500px;
            height: 280px;
            display: flex;
            justify-content: space-between;
        }




        .foot-l div h5 {
            color: #666666;
        }



        .foot-l div a {
            text-decoration: none;
            font-size: 12px;
            color: #888888;
        }



        .foot-l div a:hover {
            color: #14DA66;
        }



        .foot-r {
            width: 300px;
            margin-left: 400px;
        }



        .foot-r h3 a {
            font-size: 20px;
            color: #666666;
            text-decoration: none;
        }



        .foot-r p {
            font-size: 18px;
            color: #666666;
        }



        .foot-r p a {
            display: inline-block;
            font-size: 18px;
            text-decoration: none;
            color: #666666;
            /*padding-top: 10px;*/
        }



        .foot-r p .tel {
            display: inline-block;
            width: 26px;
            height: 26px;

            background-image: url(common.png);
            background-position: -66px -176px;
        }



        .email {
            display: inline-block;
            width: 26px;
            height: 26px;
            padding-top: 10px;
            background-image: url(common.png);
            background-position: -35px -171px;
        }



        .qq {
            display: inline-block;
            width: 26px;
            height: 26px;
            padding-top: 10px;
            background-image: url(common.png);
            background-position: 0px -172px;
        }



        .bqq {
            width: 140px;
            height: 40px;
            background-color: #11C75C;
            color: white;
            border: none;
            border-radius: 5px;
            line-height: 40px;
            font-size: 16px;
        }

        .bottom {
            border-top: 1px solid #666666;
            margin-top: 40px;
        }

        .weibo {
            display: inline-block;
            width: 26px;
            height: 26px;
            padding-top: 10px;
            background-image: url(common.png);
            background-position: -64px -204px;
        }

        .weixin {
            display: inline-block;
            width: 26px;
            height: 26px;
            padding-top: 10px;
            background-image: url(common.png);
            background-position: -34px -204px;
            margin-right: 50px;
        }

        .bleft {
            margin-top: 10px;
        }

        .bleft a {
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin-right: 18px;
            color: #666666;
            margin-right: 20px;
        }

        .bleft a:hover {
            color: #10c55b;
        }

        .bottom p {
            display: inline-block;
            float: right;
            margin-top: -20px;
            color: #666666;
            font-size: 14px;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <nav class="nav">
        <div class="container nav-container">
            <ul class="nav-left">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">所有分类</a></li>
                <li><a href="#">设计创意</a></li>
                <li><a href="#">办公创意</a></li>
                <li><a href="#">···</a></li>
            </ul>
            <ul class="nav-right">
                <li class="vip"><a href="#"><span>VIP中心</span></a></li>
                <li class="login"><a href="#">请登录</a></li>
                <li class="register"><a href="#">免费注册</a></li>
            </ul>
        </div>
    </nav>

    
    <div class="container">
        <header>
            <a href="#"><img src="1.png" alt=""></a>
            <ul class="search">
                <li class="search-list">
                    <a href="#">全站</a>
                    <input type="text" placeholder="800万免费设计素材任意下载">
                    <a href="#"><span></span></a>
                </li>
                <li class="search-info">
                    热门搜索：
                    <a href="#">七夕</a>
                    <a href="#">详情页</a>
                    <a href="#">icon</a>
                    <a href="#">主图</a>
                    <a href="#">秋季</a>
                    <a href="#">PPT模板</a>
                    <a href="#">EXECL模板</a>
                    <a href="#">首页</a>
                    <a href="#">个人简历</a>
                    <a href="#">装饰画</a>
                </li>
            </ul>
        </header>
    </div>

    
    <div class="banner">
        <div class="container banner-info">
            <ul class="img-list">
                <li class="current"><a href="#"><img src="banner01.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner02.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner03.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner04.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner05.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner06.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner07.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner08.jpg" alt=""></a></li>
            </ul>
            <ul class="indicator">
                <li class="active"><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
        <a href="#" class="img-btn prev"></a>
        <a href="#" class="img-btn next"></a>
    </div>

    
    <div class="container">
        <div class="jxzt content-box">
            <div class="content-title">
                <h2>精选专题</h2>
                <ul>
                    <li><a href="#">100万党建素材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</a></li>
                    <li><a href="#">更多 >></a></li>
                </ul>
            </div>
            <ul class="content-list">
                <li>
                    <a href="#">
                        <img src="jxzt01.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>和啤酒有关</h3>
                            <p>啤酒是如何拯救世界的</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="jxzt02.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>爱的元素背景</h3>
                            <p>牛郎织女，鹊桥相会</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="jxzt03.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>鲜花背景精选</h3>
                            <p>为你的设计锦上添花</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="jxzt04.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>大海有关的海报集</h3>
                            <p>好想去看一看大海！</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="container">
        <div class="syhb content-box">
            <div class="content-title">
                <h2>商用海报</h2>
                <ul>
                    <li><a href="#">招聘海报</a></li>
                    <li><a href="#">配图海报</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">促销海报</a></li>
                    <li><a href="#">原创插画</a></li>
                </ul>
            </div>
            <ul class="content-list">
                <li>
                    <a href="#">
                        <img src="syhb01.jpg" alt="">
                        
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p></p>
                                    </a>
                                    
                </li>
                                
                <li>
                    <a href="#">
                        <div class="heart"></div>
                        <p></p>
                    </a>
                </li>
            </ul>
        </div>
        </a>
        </li>
        <li>
            <a href="#">
                        <img src="syhb02.jpg" alt="">
                        
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p></p>
                                    </a>
                                    
        </li>
                                
        <li>
            <a href="#">
                <div class="heart"></div>
                <p></p>
            </a>
        </li>
        </ul>
    </div>
    </a>
    </li>
    <li>
        <a href="#">
                        <img src="syhb03.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p></p>
                                    </a>
    </li>
    <li>
        <a href="#">
            <div class="heart"></div>
            <p></p>
        </a>
    </li>
    </ul>
    </div>
    </a>
    </li>
    <li>
        <a href="#">
                        <img src="syhb04.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p></p>
                                    </a>
    </li>
    <li>
        <a href="#">
            <div class="heart"></div>
            <p></p>
        </a>
    </li>
    </ul>
    </div>
    </a>
    </li>
    </ul>
    </div>
    </div>

<footer>
        <div class="container">
            <div class="foo">
                <div class="foot">
                    <div class="foot-l">
                        <div>
                            <h5>常见问题</h5>
                            <p><a href="#">成为特邀设计师</a></p>
                            <p><a href="#">成为原创贡献者</a></p>
                            <p><a href="#">注册登录</a></p>
                            <p><a href="#">帐号/密码</a></p>
                            <p><a href="#">充值/售后</a></p>
                            <p><a href="#">版权投诉</a></p>
                        </div>
                        <div>
                            <h5>关于千图网</h5>
                            <p><a href="#">关于我们</a></p>
                            <p><a href="#">媒体报道</a></p>
                            <p><a href="#">加入我们</a></p>
                            <p><a href="#">心系千图</a></p>
                            <p><a href="#">每日最新</a></p>
                        </div>
                        <div>
                            <h5>产品服务</h5>
                            <p><a href="">官方博客</a></p>
                            <p><a href="">帮助中心</a></p>
                            <p><a href="">千图导航</a></p>

                        </div>
                        <div>
                            <h5>友情链接</h5>
                            <p><a href="">我图网</a></p>
                            <p><a href="">千库网</a></p>
                            <p><a href="">摄图网</a></p>
                            <p><a href="">包图网</a></p>
                            <p><a href="">视达网</a></p>
                            <p><a href="">更多>></a></p>
                        </div>
                    </div>
                    <div class="foot-r">
                        <h3><a href="#">客服咨询</a></h3>
                        <p> <span class="tel"></span>400-998-7011 （9:00-18:00）</p>
                        <p> <span class="email"></span> <a href="">feedback@58pic.com</a></p>
                        <button type="" class="bqq"> <span class="qq"></span>点我交谈</button>
                    </div>
                </div>
                <div class="bottom">
                    <div class="bleft">
                        <span class="weibo"></span>
                        <span class="weixin"></span>
                        <a href="">注册声明</a>
                        <a href="">版权声明</a>
                        <a href="">售后服务</a>
                    </div>

                    <p>
                        Copyright ©2013-2017 千图网 沪ICP备10011451号-6上海工商 安全实名验证 信用网站
                    </p>
                    <div class="clear"></div>
                </div>
            </div>
    </footer>
   

</body>

</html>
<script>
    var searchInput = document.querySelector('.search input');
var searchLi = document.querySelector('.search-list');
searchInput.onfocus = function(){
    searchLi.style.borderColor = '#10c55b';
}
searchInput.onblur = function(){
    searchLi.style.borderColor = '#999';
}

// 轮播图
var banner = document.querySelector('.banner');
var imgLis = document.querySelectorAll('.banner .img-list li');
var indicators = document.querySelectorAll('.banner .indicator li');
var prev = document.querySelector('.banner .prev');
var next = document.querySelector('.banner .next');

var index = 0;//记录当前图片的索引值

var bgColorArr = ['#060606','#feff0f','#fdf100','#2c9bff','#89dce3','#fef8b3','#110204','#f4cad8'];
function showImg(){
    for(var i = 0; i < imgLis.length; i++){
        // 先把所有图片隐藏，所有指示灯的背景去掉
        imgLis[i].className = '';
        indicators[i].className = '';
    }
    console.log(index);
    // 根据index的值，来显示图片和改变指示灯，banner的背景
    imgLis[index].className = 'current';
    indicators[index].className = 'active';
    banner.style.backgroundColor = bgColorArr[index];
}
// 上一张
function prevImg(){
    index = index==0 ? imgLis.length-1 : index-1;
    showImg();
}
function nextImg(){
    index = index==imgLis.length-1 ? 0 : index+1;
    showImg();
}


// 1.自动切换
var timer = setInterval(nextImg,1000);

// 鼠标进入容器，自动切换停下来
banner.onmouseover = function(){
    clearInterval(timer);
    timer = null;
    prev.style.display = 'block';
    next.style.display = 'block';
}
banner.onmouseout = function(){
    prev.style.display = 'none';
    next.style.display = 'none';
    if (timer != null) {
        // 定时器已经开启，不要重复开启
        return;
    }
    timer = setInterval(nextImg,1000);
}

// 2.点击指示灯切换图片
for(var i = 0; i < indicators.length; i++){
    indicators[i].index = i;
    indicators[i].onclick = function(){
        index = this.index;
        showImg();
    }
}

// 3.手动点击按钮切换
prev.onclick = function(){
    prevImg();
}
next.onclick = function(){
    nextImg();
}
</script>